<template>
  <Modal v-model="status"
         title="收文转发"
         :mask-closable="false"
         footer-hide
         @on-cancel="cancel">
    <div class="transfer-form">
      <Form label-position="top"
            ref="form"
            style="padding:0 10px;">
        <Form-item label="批示"
                   prop="comment">
          <Input v-model="params.data.comment"
                 :maxlength="200"
                 class="input_new" />
        </Form-item>
        <Form-item label="接收人"
                   prop="receiver_ids">
          <Input v-model="receiver_ids"
                 :maxlength="200"
                 class="input_new"
                 placeholder="请选择"
                 readonly
                 @on-focus="showUserTree" />
        </Form-item>
      </Form>

      <div class="button-area"
           slot='footer'>
        <Button type="primary"
                @click="confirm">确定</Button>
        <Button @click="cancel">取消</Button>
      </div>

      <user-tree ref="JUserTree"
                 @change="setReceiver" />
      <Spin v-show="loading"
            size="large"
            fix />

    </div>
  </Modal>
</template>

<script>
import UserTree from '../UserTree';
import storage from 'good-storage';
import { ajaxPost } from 'global/axios';

export default {
  components: {
    'user-tree': UserTree,
  },

  data() {
    return {
      status: false,
      loading: false,
      target: null,
      receiver_ids: '',
      params: {
        data: {
          comment: '',
          _id: '',
          receivers: [],
        },
        url: '/bus/srmsg/forward',
        token: storage.session.get('token'),
      },
    };
  },

  methods: {
    show(row) {
      this.status = true;
      this.params.data._id = row._id;
    },

    cancel() {
      this.status = false;
      this.receiver_ids = '';
      this.params.data = { comment: '', _id: '', receivers: [] };
    },

    showUserTree() {
      this.$refs.JUserTree.show();
    },

    setReceiver(data) {
      let receiver_ids = [];
      this.params.data.receivers = data.map(item => {
        receiver_ids.push(item.realname);
        return {
          receiver_name: item.realname,
          receiver_id: item.userid,
        };
      });
      this.receiver_ids = receiver_ids.join('、');
    },

    confirm() {
      if (!this.receiver_ids) {
        this.$Message.warning('请选择转发人员');
        return false;
      }
      this.loading = true;
      ajaxPost({
        ...this.params,
        success: res => {
          this.loading = false;
          let { code, message } = res.data;
          this.$Message[code === '0000' ? 'success' : 'error'](message);
          code === '0000' && this.cancel();
        },
      });
    },
  },
};
</script>

<style lang="less" scope>
.transfer-form {
  .upload_file {
    .ivu-form-item-content {
      display: flex;
      .ivu-upload {
        margin-right: 10px;
      }
    }
  }
  .input_new {
    .ivu-input {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
    }
  }
  .button-area {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
</style>